<template>  
  <div id="box">  
    <!-- 顶部按钮 -->  
    <div class="head" :style="headStyle">  
      <div class="mob_03">  
        <img :src="require('@/assets/home/mob_03.png')" alt="发起工单">  
      </div>  
      <div class="mob_05">  
        <img :src="require('@/assets/home/mob_05.png')" alt="发起巡检">  
      </div>  
      <div class="mob_08">  
        <img :src="require('@/assets/home/mob_08.png')" alt="报警提醒">  
      </div>  
    </div>  

    <!-- 一级菜单 -->  
    <div class="menu">  
      <div class="me_01">  
        <div class="m_01">  
          <img :src="require('@/assets/home/mob_14.png')" alt="工艺流程">  
          <h5>工艺流程</h5>  
        </div>  
        <div class="m_01">  
          <img :src="require('@/assets/home/mob_16.png')" alt="巡检管理">  
          <h5>巡检管理</h5>  
        </div>  
        <div class="m_01">  
          <img :src="require('@/assets/home/mob_18.png')" alt="保养管理">  
          <h5>保养管理</h5>  
        </div>  
        <div class="m_01">  
          <img :src="require('@/assets/home/mob_20.png')" alt="设备管理">  
          <h5>设备管理</h5>  
        </div>  
      </div>  

      <div class="me_02">  
        <div class="m_01">  
          <img :src="require('@/assets/home/mob_26.png')" alt="工单列表">  
          <h5>工单列表</h5>  
        </div>  
        <div class="m_01">  
          <img :src="require('@/assets/home/mob_27.png')" alt="AI专家库">  
          <h5>AI专家库</h5>  
        </div>  
        <div class="m_01">  
          <img :src="require('@/assets/home/mob_29.png')" alt="报表管理">  
          <h5>报表管理</h5>  
        </div>  
        <div class="m_01">  
          <img :src="require('@/assets/home/mob_31.png')" alt="成本管理">  
          <h5>成本管理</h5>  
        </div>  
      </div>  
    </div>  

    <!-- 信息提示 -->  
    <div class="info-message">  
      <div class="message-alert">  
        <h4>消息提示</h4>  
        <p>污水厂有一条新预警消息待处理……<a href="#">详细介绍</a></p>  
      </div>  
    </div>  

    <!-- 图表内容 -->  
    <div class="a_01">  
      <img class="full-width" :src="require('@/assets/home/mob_37.png')" alt="数据图表">  
    </div>  
    <div class="b_01">  
      <img class="full-width" :src="require('@/assets/home/mob_38.png')" alt="数据图表">  
    </div>  
    <div class="c_01">  
      <img class="full-width" :src="require('@/assets/home/mob_39.png')" alt="数据图表">  
    </div>  
    <div class="d_01">  
      <img class="full-width" :src="require('@/assets/home/mob_40.png')" alt="数据图表">  
    </div>  
    <div class="e_01">  
      <img class="full-width" :src="require('@/assets/home/mob_43.png')" alt="数据图表">  
    </div>  
     <!-- 底部导航栏 -->
    <BottomNav :activeTab="'device'" />
    
  </div>  
</template>  

<script>  
import BottomNav from "../components/mobileBottomNav.vue";
export default {  
 name: "Home",  
 components: {
    BottomNav,
  },
  data() {  
    return {  
      headStyle: {  
        backgroundImage: `url(${require('@/assets/home/ban.jpg')})`,  
        height: "140px",  
        backgroundRepeat: "no-repeat",  
        backgroundSize: "cover", 
      },  
    };  
  },  
};  
</script>
<style scoped>  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
#box {  
  font-family: Arial, sans-serif;  
}  
.head {  
  display: flex;  
  justify-content: space-evenly;  
  align-items: center;  
}  
.mob_03, .mob_05, .mob_08 {  
  width: 280px; /* 设置宽度 */  
  height: 150px; /* 设置高度 */  
  display: flex; /* 使 img 居中 */  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
  margin: 0 10px; /* 设置水平间距 */ 
}  
.mob_03 img, .mob_05 img, .mob_08 img {  
    max-width: 90%; /* 确保图片不超过容器大小 */  
    max-height: 90%; /* 确保图片不超过容器大小 */  
    padding :10px;  
    margin-top: 60px;
    margin-right: 5px;

}  
.mob_08 .alert-count {  
  background-color: red;  
  color: white;  
  border-radius: 50%;  
  margin-left: 5px;  
  padding: 3px 6px;  
  font-size: 14px;  
}  
.menu {  
    margin: 20px 0;  
}  

.me_01, .me_02 {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
}  

.m_01 {  
    width: 24%;/* 调整为宽度为24%以显示四个图标 */  
    margin-bottom: 20px;  
    text-align: center;  
}  

.m_01 img {  
    width: 60%; /* 调整为60%以缩小图标 */  
    height: auto; /* 确保高度自适应 */  
}  
.info-message {  
  padding: 10px;  
  background: #f9f9f9;  
  border-left: 5px solid #007bff;  
  margin: 15px 0;  
}  
.info-message p {  
  font-size: 14px;  
}  
.full-width {  
  width: 100%;  
  height: auto;  
}  
.bottom {  
  display: flex;  
  justify-content: space-around;  
  padding: 15px 0;  
  background-color: #f2f2f2;  
}  
.b_01 {  
  text-align: center;  
  flex: 1;  
}  
.b_01 img {  
  width: 30%;  
}  
.b_01 h5 {  
  font-size: 12px;  
  margin-top: 5px;  
}  
</style>